<template>
  <div>
    <template v-if="data.status === 'wait_make_cabinet'">
      <el-table
        border
        :data="boxTable"
      >
        <el-table-column
          label="箱唛"
          prop="boxId"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="货件类型"
          prop="shipmentType"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{getShipmentTypeStr2(row.shipmentType)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="实重（kg）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="length"
          label="长（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="width"
          label="宽（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="height"
          label="高（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="volumeWeight"
          label="体积重（6000）"
          align="center"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="squareNumber"
          label="方数"
          align="center"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="calWeight"
          label="计费重"
          align="center"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          align="center"
          min-width="100"
          fixed="right"
        >
          <template v-slot="{row}">
            <template v-if="row.isInstall">
              <el-tag type="success" effect="dark">已装柜</el-tag>
            </template>
            <template v-else>
              <el-tag type="warning" effect="dark" style="cursor: pointer" @click="installRow(row)">待装柜</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          min-width="200"
          fixed="right"
          v-if="isFirstLegRole()"
        >
          <template v-slot="{row}">
            <el-button @click="installRow(row)" type="primary" v-if="!row.isInstall">确认已装柜</el-button>
            <el-button type="danger" @click="removeBox(row)" :loading="removeLoading" v-if="boxTable.length > 1 && isFirstLegRole()">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-else-if="data.status === 'wait_sorting'">
      <el-table
        border
        :data="boxTable"
      >
        <el-table-column
          label="箱唛"
          prop="boxId"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          label="货件类型"
          prop="shipmentType"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{getShipmentTypeStr2(row.shipmentType)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="实重（kg）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="length"
          label="长（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="width"
          label="宽（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="height"
          label="高（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="volumeWeight"
          label="体积重（6000）"
          align="center"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="squareNumber"
          label="方数"
          align="center"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="calWeight"
          label="计费重"
          align="center"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          align="center"
          min-width="100"
          fixed="right"
        >
          <template v-slot="{row}">
            <template v-if="row.status === 'offline_delivered'">
              {{getBoxStatusStr(row.status)}}
            </template>
            <template v-else>
              <template v-if="row.isSorting">
                <el-tag type="success" effect="dark">已分拣</el-tag>
              </template>
              <template v-else>
                <el-tag type="warning" effect="dark" style="cursor: pointer" @click="sortingRow(row)">待分拣</el-tag>
              </template>
            </template>

          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          prop="op"
          align="left"
          fixed="right"
          min-width="200"
        >
          <template v-slot="{row}">
            <template v-if="(row.isSorting && isInboundSortingRole()) || row.status === 'offline_delivered'">
              /
            </template>
            <template v-else>
              <el-button type="primary" @click="sortingRow(row)">确认已分拣</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-else>
      <re-el-table
        border
        :data="boxTable"
      >
        <el-table-column
          label="箱唛"
          prop="boxId"
          align="center"
          min-width="150"
        >
          <template v-slot="{row}">
            <template v-if="row.isSortingExcept">
              <el-tooltip
                content="海外未接收到当前货件"
                placement="top"
              >
                <span class="font-red"><i class="el-icon-warning"></i>{{row.boxId}}</span>
              </el-tooltip>
            </template>
            <template v-else>
              {{row.boxId}}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="货件类型"
          prop="shipmentType"
          align="center"
          min-width="100"
        >
          <template v-slot="{row}">
            {{getShipmentTypeStr2(row.shipmentType)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="实重（kg）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="length"
          label="长（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="width"
          label="宽（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="height"
          label="高（cm）"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="volumeWeight"
          label="体积重（6000）"
          align="center"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="squareNumber"
          label="方数"
          align="center"
          min-width="180"
        >
        </el-table-column>
        <el-table-column
          prop="calWeight"
          label="计费重"
          align="center"
          min-width="180"
        >
        </el-table-column>

      </re-el-table>
    </template>

  </div>
</template>

<script>
import {getShipmentTypeStr2} from "@/utils/shipment";
import {installBox, removeContainerBox, sortingBoxLabel} from "@/api/container";
import ReElTable from "@/components/Common/ReElTable.vue";
import {isFirstLegRole, isInboundSortingRole} from "@/utils/common";
import BoxSize from "@/views/shipment/components/BoxSize.vue";
import {getBoxStatusStr} from "@/utils/boxLabel";

export default {
  name: "ContainerInfoTable",
  components: {ReElTable},
  props: {
    boxTable: {
      type: Array,
      required: true,
      default: () => [],
    },
    data: {
      type: Object,
      required: true,
    }
  },
  data(){
    return {
      removeLoading: false,
    }
  },
  methods: {
    getBoxStatusStr,
    isInboundSortingRole,
    isFirstLegRole,
    getShipmentTypeStr2,
    installRow(row){
      if(!isFirstLegRole()){
        return;
      }
      row.isInstall = 1;
      installBox({
        id: this.data.id,
        boxId: row.boxId,
      })
        .then(res=>{
          this.$successMessage(res.message)
        })
    },
    removeBox(row){
      let title = '确认移除？'
      let message = '确认将该货件移出当前货柜吗，移除后其他货柜可以再次添加该货件';
      this.$confirm(message,title)
        .then(()=>{
          this.removeLoading = true
          const data = {
            id: this.data.id,
            boxId: row.boxId,
          }

          removeContainerBox(data)
            .then(res=>{
              this.removeLoading = false
              if(res.error === 0){
                this.$successMessage(res.message)
                this.$emit('changeRow')
              }else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(()=>{

        })
    },
    sortingRow(row){
      if(!isInboundSortingRole()){
        return;
      }
      row.isSorting = 1;
      sortingBoxLabel({
        id: this.data.id,
        boxId: row.boxId,
      })
        .then(res=>{
          this.$successMessage(res.message)
        })
    },
  },

}
</script>


<style scoped lang="scss">

</style>
